<script setup lang="ts">
import { formatNumber } from '@/home/utils/format';
import type { HotArticle } from './hot';

const props = defineProps<HotArticle>();
</script>

<template>
  <div class="h-72 flex-col justify-between">
    <RouterLink :to="`/explore/journalism/detail/${props.informationId}`" target="_blank">
      <h3 class="max-w-300 truncate text-16 text-#292929 font-500 leading-28 hover:underline">
        {{ props.informationTitle }}
      </h3>
    </RouterLink>
    <p class="mt-2 max-w-372 truncate text-14 c-hex-575757 leading-22">
      {{ props.informationMsg }}
    </p>
    <div class="mt-4 flex-y-center gap-24 text-12 text-#575757 font-400 leading-16">
      <div class="w-42 flex-y-center gap-4">
        <span class="i-icons:eye-outlined size-16"></span>
        <span>{{ formatNumber(props.informationViews) }}</span>
      </div>
      <div class="w-42 flex-y-center gap-4">
        <span class="i-icons:good size-16"></span>
        <span>{{ formatNumber(props.informationLikeNum) }}</span>
      </div>
      <div class="w-42 flex-y-center gap-4">
        <span class="i-icons:favorite size-16"></span>
        <span>{{ formatNumber(props.informationCollectNum) }}</span>
      </div>
      <div class="w-42 flex-y-center gap-4">
        <span class="i-icons:comment-outlined-2 size-16"></span>
        <span>{{ formatNumber(props.informationCommentCount) }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
